<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <link rel="stylesheet" type="text/css" href="../Css/disableHyperlink.css">
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <script type="text/javascript" src="../Js/webUtil.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    
     <script type="text/javascript">
     $(function () {
		$('#newNav').click(function(){
				window.location.href="addRole.html";
		 });
    });
	
	
    function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;	
				}	
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;	
				}	
			}
		}
		function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}		
			}
			if(ids.length>0){
				if(confirm("确认删除?")){
				    $.ajax({
                        type:"POST",
                        url:"/role/list",
                        traditional:true,
                        data:$("input[name='check']:checked").serialize()+"&_method=DELETE",
                        dataType:"json",
                        success: function (vo) {
                            alert(vo.msg);
                            window.location.href="index.html";
                        }
                    });
				}
			}else{
				alert("请选中要删除的项");
			}
		}
    </script>   
    
</head>
<body>
<form id="queryForm" class="form-inline definewidth m20" action="index.html" method="get">
    <input name="index" style="visibility: hidden">
    <input name="size" value="5" style="visibility: hidden">
    角色名称：
    <input type="text" name="name" id="name"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button id="query" type="button" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>角色名称</th>
        <th>状态</th>
        <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
	     <tr>
         	<td style="vertical-align:middle;"><input type="checkbox" name="check" value="1"></td>
            <td>管理员</td>
            <td>启用</td>
            <td><a href="editRole.html">编辑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:alert('删除成功！');">删除</a> </td>
        </tr>
    </tbody>
</table>
        
        
   <table class="table table-bordered table-hover definewidth m10" >
       <tr>
           <th colspan="5">
           <th colspan="5">
               <div class="inline pull-right page">
                   <a id="firstPage">第一页</a>
                   <a id="prePage">上一页</a>
                   <span id="pageList">
                </span>
                   <a id="nextPage">下一页</a>
                   <a id="lastPage">最后一页</a>
                   &nbsp;&nbsp;&nbsp;共<span id="total">32</span>条记录<span class='current'> <span
                       id="current_page">1</span>/<span id="total_page">33 </span></span>页
               </div>
               <div>
                   <button type="button" class="btn btn-success" id="newNav">添加资源</button>&nbsp;&nbsp;&nbsp;
                   <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
               </div>
           </th>
       </tr>
   </table>
 </body>
    <script>
        $(function () {
            loadData();
            $("#query").click(function () {
                loadData();
            });

        });
        function loadData() {
            let url = document.location.toString();
            let index = url.GetValue("index");
            if (index == null) {
                index = 1;
            }
            let id = url.GetValue("id");
            let name = url.GetValue("name");
            if (id != null)
                $("input[name='id']").val(id);
            if (name != null)
                $("input[name='name']").val(name);

            $("input[name='index']").val(index);

            $.ajax({
                type:"GET",
                url:"/role/list",
                data:$("#queryForm").serialize(),
                dataType:"json",
                success:function(vo){
                    var str="";
                    $("#tbody").html(str);
                    if(vo.code==200){
                        var list = vo.pageInfo.list;
                        for (var i=0;i<list.length;i++){
                            var obj = list[i];
                            var id = obj.roleId;
                            var name = obj.roleName;
                            var number= obj.roleState==0?'启用':'禁用';
                            str += '<tr>\n' +
                            '         \t<td style="vertical-align:middle;">' +
                            '               <input type="checkbox" name="check" value="'+id+'">' +
                            '           </td>\n' +
                            '            <td>'+name+'</td>\n' +
                            '            <td>'+number+'</td>\n' +
                            '            <td><a href="editRole.html?id='+id+'&index='+index+'">编辑</a>&nbsp;&nbsp;&nbsp;' +
                            '                <a href="#" onclick="deleteRole('+id+')">删除</a> ' +
                            '            </td>\n' +
                            '        </tr>';
                            $("#tbody").html(str);
                        }
                        fillPageData(vo.pageInfo);
                    }else {
                        alert(vo.msg);
                    }
                }
            });
        }

        function deleteRole(id){
            let url = document.location.toString();
            let index = url.GetValue("index");
            $.ajax({
                type:"DELETE",
                url:"/role/"+id,
                data:"",
                dataType:"json",
                success: function (vo) {
                    alert(vo.msg);
                    window.location.href="index.html?index="+index;
                }
            });

        }

        function fillPageData(pageInfo) {
            let id = $("input[name='id']").val();
            let name = $("input[name='name']").val();
            let data = "&id=" + id + "&name=" + name;

            $("#total").html(pageInfo.total);
            $("#total_page").html(pageInfo.pages);
            $("#current_page").html(pageInfo.pageNum);
            $("input[name='index']").val(pageInfo.pageNum);

            $("#firstPage").attr('href', 'index.html?index=' + 1 + data);
            $("#prePage").attr('href', 'index.html?index=' + (pageInfo.pageNum - 1) + data);
            $("#nextPage").attr('href', 'index.html?index=' + (pageInfo.pageNum + 1) + data);
            $("#lastPage").attr('href', 'index.html?index=' + (pageInfo.pages) + data);
            $("#firstPage").removeAttr("disabled")
            $("#prePage").removeAttr("disabled")
            $("#nextPage").removeAttr("disabled")
            $("#lastPage").removeAttr("disabled")

            if (pageInfo.isFirstPage) {
                $("#firstPage").prop("disabled", true);
                $("#prePage").prop("disabled", true);
            }

            if (pageInfo.isLastPage) {
                $("#nextPage").attr("disabled", true);
                $("#lastPage").attr("disabled", true);
            }
            let str = "";
            let low = pageInfo.pageNum - 2;
            let high = pageInfo.pageNum + 2;
            if (low >= 1 && high <= pageInfo.pages) {
                for (let i = low; i <= high; i++) {
                    str += "<a href='index.html?index=" + i + data + "' " + (i == pageInfo.pageNum ? "disabled=true" : "") + ">" + i + "</a>";
                }
            } else if (low < 1) {
                if (pageInfo.pages == 0)
                    str += "<a href='index.html?index=1" + data + "' disabled=true>1</a>";
                else {
                    for (let i = 1; i <= (pageInfo.pages < 5 ? pageInfo.pages : 5); i++) {
                        str += "<a href='index.html?index=" + i + data + "' " + (i == pageInfo.pageNum ? "disabled=true" : "") + ">" + i + "</a>";
                    }
                }
            } else if (high > pageInfo.pages) {
                for (let i = (pageInfo.pages - 5 >= 1 ? pageInfo.pages - 4 : 1); i <= pageInfo.pages; i++) {
                    str += "<a href='index.html?index=" + i + data + "' " + (i == pageInfo.pageNum ? "disabled=true" : "") + ">" + i + "</a>";
                }
            }
            $("#pageList").html(str)
        }
    </script>
</html>